import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/ui/draw_under_line.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class SearchProductController extends GetxController {
  List<String> results = [
    '游戏笔记本',
    '游戏本',
    '外星人笔记本',
    '机械键盘',
    '一体机',
    '手机全网通',
    '台式电脑',
    '笔记本内存',
    '无线鼠标'
  ];

  RxList<Rx<_SearchHistoryData>> data = RxList([]);

  var duration = const Duration(milliseconds: 300);

  @override
  void onInit() {
    initData();
    super.onInit();
  }

  void initData() {
    data.add(Rx(_SearchHistoryData(name: '华为笔记本')));
    data.add(Rx(_SearchHistoryData(name: '荣耀笔记本')));
    data.add(Rx(_SearchHistoryData(name: '小米笔记本')));
    data.add(Rx(_SearchHistoryData(name: '华硕笔记本')));
    data.add(Rx(_SearchHistoryData(name: '宏基笔记本')));
    data.add(Rx(_SearchHistoryData(name: '联想笔记本')));
    data.add(Rx(_SearchHistoryData(name: 'MacBook Pro')));
    data.add(Rx(_SearchHistoryData(name: '华为P30')));
    data.add(Rx(_SearchHistoryData(name: '华为Mate60')));
    data.add(Rx(_SearchHistoryData(name: '荣耀100')));
  }

  void updateData() {
    update();
  }
}

class SearchProductPage extends GetView<SearchProductController> {
  const SearchProductPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: TextField(
          decoration: InputDecoration(
            hintText: '',
            hintStyle: StylesUtils.customTextStyle(
                color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20), borderSide: BorderSide.none),
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20), borderSide: BorderSide.none),
            isCollapsed: false,
            isDense: false,
            prefixIconConstraints: const BoxConstraints.expand(width: 40, height: 15),
            prefixIcon: Padding(
              padding: const EdgeInsets.only(left: 5),
              child: SvgUtils.assetName('shape_u373', width: 14.w, height: 14.h),
            ),
            contentPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
            constraints: const BoxConstraints.expand(height: 35),
            filled: true,
            fillColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5),
          ),
          style: StylesUtils.customTextStyle(
            color: ColorsUtils.color3333,
          ),
          onChanged: (String search) {},
        ),
        actions: [
          TextButton(
              onPressed: () {},
              child: Text(
                '取消',
                style: StylesUtils.customTextStyle(),
              ))
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 40,
              padding: const EdgeInsets.symmetric(horizontal: 15),
              alignment: Alignment.centerLeft,
              child: Text(
                '热门搜索',
                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
              color: Colors.white,
              child: StaggeredGrid.count(
                crossAxisCount: 3,
                crossAxisSpacing: 15,
                children: controller.results
                    .map((str) => TextButton(
                        onPressed: () {
                          Get.toNamed(RoutePath.searchResult);
                        },
                        style: ButtonStyle(
                          shape: WidgetStatePropertyAll(RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(6.r),
                              side: BorderSide(
                                  color:
                                      ColorsUtils.parseColorFromHexString(ColorsUtils.color7979)))),
                          padding: const WidgetStatePropertyAll(
                              EdgeInsets.symmetric(vertical: 2, horizontal: 4)),
                          minimumSize: const WidgetStatePropertyAll(Size(77, 30)),
                          alignment: Alignment.center,
                        ),
                        child: Text(
                          str,
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                        )))
                    .toList(),
              ),
            ),
            Container(
              height: 40,
              padding: const EdgeInsets.symmetric(horizontal: 15),
              alignment: Alignment.centerLeft,
              child: Text(
                '搜索历史',
                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
              ),
            ),
            GetBuilder<SearchProductController>(
              builder: (c) {
                return ListBody(
                  children: [
                    ...c.data.map((d) => Obx(() => AnimatedSize(
                          duration: c.duration,
                          child: Visibility(
                            visible: !d.value.isDel,
                            maintainAnimation: true,
                            maintainState: true,
                            child: DrawUnderLine(
                              dx: 20,
                              child: Container(
                                height: 45,
                                color: Colors.white,
                                padding: const EdgeInsets.only(left: 20, right: 30),
                                alignment: Alignment.centerLeft,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text.rich(TextSpan(children: [
                                      WidgetSpan(
                                          child: SvgUtils.assetName('time', width: 15, height: 15),
                                          alignment: PlaceholderAlignment.middle),
                                      TextSpan(
                                          text: ' ${d.value.name}',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color3333)),
                                    ])),
                                    IconButton(
                                        onPressed: () {
                                          d.update((v) {
                                            v?.isDel = true;
                                          });
                                        },
                                        icon: Icon(
                                          Icons.close,
                                          size: 15,
                                          color: ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.color6666),
                                        ))
                                  ],
                                ),
                              ),
                            ),
                          ),
                          onEnd: () {
                            Get.engine.addPostFrameCallback((Duration timestamp) {
                              c.data.remove(d);
                            });
                          },
                        ))),
                    Container(
                      alignment: Alignment.center,
                      margin: const EdgeInsets.only(top: 20, bottom: 40),
                      child: TextButton(
                          onPressed: () {
                            c.data.clear();
                            c.updateData();
                          },
                          child: Text(
                            '清除收搜历史',
                            style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                          )),
                    ),
                  ],
                );
              },
              init: controller,
            )
          ],
        ),
      ),
    );
  }
}

class _SearchHistoryData {
  String name;

  bool isDel;

  _SearchHistoryData({required this.name, this.isDel = false});

  @override
  String toString() {
    return '{"name": $name, "isDel": $isDel}';
  }
}
